<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
    <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
    <f:view>
        <head>
            <title><h:outputText value="#{controller.header}"/> </title>
            <link rel="stylesheet" type="text/css" href="style/all.css" /> 
        </head>
        <body >
            <h2 class="title"><h:outputText value="#{controller.header}"/> </h2>
            <div class="missed" >
                <h:form>
                <h:dataTable value="#{missed.missedAlarms}" var="miss">
                    <h:column >
                        <span><h:outputText value="#{miss}"/>
                            <span class="it_span">is missed </span>
                        </span>
                        <span>
                            <h:commandLink styleClass="clear_com"  action="#{controller.clearNotification}" value="clear">
                                    <f:param name="miss" value="#{miss}"/>
                            </h:commandLink>
                        </span>
                    </h:column>
                </h:dataTable>
                </h:form>
            </div>
            <div class="alarm_list_div">
                <h:form>
                    <h:dataTable value="#{alarmList.alarms}" var="alarm">
                        <h:column >
                        <span id="title"><h:outputText  value="#{alarm.title }"/>&nbsp;</span>
                        <span id="time"><h:outputText value="#{alarm.time }"/></span>
                        <span id="note"><h:outputText value="#{alarm.note }"/></span>
                        <span id="status" ><h:outputText value="#{alarm.status}"/></span>
                        <span id="edit_btn">
                            <h:commandLink id="edit_btn_link" action="#{controller.select}" value="edit">
                                <f:param name="alarm" value="#{alarm.title}"/>
                            </h:commandLink>
                        </span>


                        </h:column>
                    </h:dataTable>
                </h:form>

                <table>
                    <tr>
                        <td>AlarmList size is:</td>
                        <td><h:outputText value="#{alarmList.length}"/></td>
                    </tr>
                </table>
            </div>
            <div id="add_new_btn">
                <a id="add_new_btn_link" href="add_new.faces">Add new</a>
            </div>
        </body>
    </f:view>
<script type="text/javascript">
    function updateNum(){
        var num = document.getElementById("num").value;
        document.getElementById("num2").value = num * 2;
        
    }
</script>
</html>

